<!--
 * @Author: chenr 526963089@qq.com
 * @Date: 2023-01-16 17:06:34
 * @LastEditors: chenr 526963089@qq.com
 * @LastEditTime: 2023-02-15 11:10:34
 * @Description: 
-->
<template>
  <template v-if="!info.hidden">
    <template v-if="!info.children || info.hideChildrenInMenu">
      <a-menu-item :key="info.path">
        <template #icon v-if="info.meta?.icon">
          <span
            v-if="info.meta.icon"
            :class="['iconfont', info.meta?.icon || '']"
          ></span>
          <!-- <component v-else :is="info.meta?.icon"></component> -->
        </template>
        <span style="user-select: none">{{
          info.meta?.title || info.name
        }}</span>
      </a-menu-item>
    </template>
    <template v-else>
      <a-sub-menu :key="info.path">
        <template #icon v-if="info.meta?.icon">
          <span
            v-if="info.meta.icon"
            :class="['iconfont', info.meta?.icon || '']"
          ></span>
        </template>
        <template #title>
          <span style="user-select: none">
            {{ info.meta?.title || info.name }}
          </span>
        </template>
        <SubMenu v-for="item in info.children" :info="item"></SubMenu>
      </a-sub-menu>
    </template>
  </template>
</template>

<script lang="ts" setup>
defineProps({
  info: { type: Object, default: {} },
});
</script>
